<template>
	<view class="box">
		<view class="card_head">
			<view class="icon" @click="contact">
				<u-image :showLoading="true" shape="circle" src="../../../static/lease/phone.png" width="80rpx"
					height="80rpx"></u-image>
				<view class="">
					联系租客
				</view>
			</view>
			<view class="column">
				姓名: {{data.tenantName}}
			</view>
			<view class="column">
				性别:{{data.tenantGender == 0? '男' : '女'}}
			</view>
			<!-- <view class="column">
				性别:{{data.tenantGender? data.tenantGender :'未知'}}
			</view> -->
			<view class="flexBetween">
				<view class="column">
					电话:{{data.tenantPhone}}
				</view>
				<!-- 	<view class="tab">
					7天后逾期
				</view> -->
			</view>
			<u-popup :show="show" mode="center" :round="10" @close="show = false">
				<view class="popup">
					<view class="cue">
						拨打{{data.tenantPhone}}
					</view>
					<view class="button_box">
						<u-button type="primary" class="sure" @tap="showDetermine">确定</u-button>
						<u-button @click="show = false">取消</u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<u-sticky bgColor="#fff" height="60" width="120">
			<u-tabs :list="list1" lineWidth="60" activeStyle="color: #4ca0fd" itemStyle="padding:0 34px;height: 40px;"
				@click="click"></u-tabs>
		</u-sticky>
		<!-- 租约信息 -->
		<view class="module" v-if="index ==0">
			<view class="card">
				<view class="row">
					<view class="title">
						租约状态
					</view>
					<view class="data" v-if="data.leaseState==0">
						未开始
					</view>
					<view class="data" v-if="data.leaseState==1">
						租期中
					</view>
					<view class="data" v-if="data.leaseState==2">
						已终止
					</view>
					<view class="data" v-if="data.leaseState==3">
						已完结
					</view>
				</view>
				<view class="row">
					<view class="title">
						签约房源
					</view>
					<view class="data">
						{{data.houseRoomName}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						起止日期
					</view>
					<view class="data">
						{{data.beginDate}}/{{data.endDate}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						短期
					</view>
					<view class="data">
						{{data.tenancyTerm}}个月
					</view>
				</view>
				<view class="row">
					<view class="title">
						入住人数
					</view>
					<view class="data">
						{{data.peopleNumber}}人
					</view>
				</view>
				<view class="row">
					<view class="title">
						交租方式
					</view>
					<view class="data">
						{{data.rentPayMode}}月一付
					</view>
				</view>
				<view class="row">
					<view class="title">
						租金
					</view>
					<view class="data">
						{{data.rent}}元
					</view>
				</view>
				<view class="row">
					<view class="title">
						房屋押金
					</view>
					<view class="data">
						{{data.deposit}}元
					</view>
				</view>
			</view>
			<view class="card">
			<!-- 	<view class="row">
					<view class="title">
						租约备注
					</view>
					<view class="data" @click="remark">
						<view>
							添加备注
						</view>
						<u-icon name="arrow-right" color="#2979ff" size="18"></u-icon>
					</view>

				</view> -->
				<view class="contract">
					<view style="margin-right: 20rpx;">
						纸质合同
					</view>
					<view class="tab _a" @click="download" v-if="data.tenantCardUrl != 0">
						下载
					</view>
				</view>
				<u--image :showLoading="true" v-for="(item, index) of data.mediaList" :key="index" :src="item.mediaUrl || '../../../static/default/404.png'" width="80px" height="100px"
					@click="clickDeail"></u--image>
			</view>
		</view>
		<!-- 未收费用 -->
		<view class="module" v-if="index ==1">
			<view class="card" v-for="(item, index) in data.uncollectedList" :key="item.id">
				<template v-if="item.payStatus == 0">
					<view class="row">
						<view class="houseRoomName">
							{{data.houseRoomName}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							租金(1个月)
						</view>
						<view class="data">
							{{item.actualAmount}}
						</view>
					</view>

					<view class="row">
						<view class="title">
							账期
						</view>
						<view class="data">
							{{item.billPeriod}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							约定提前收租日
						</view>
						<view class="tab">
							{{item.receivableDate}}
						</view>
					</view>
				</template>

			</view>
		</view>
		
		<view class="module" v-if="index ==2">
			<view class="card" v-for="(item,index) in data.receivedList" :key="item.id">
				<template v-if="item.payStatus == 2">
					<view class="row">
						<view class="houseRoomName">
							{{data.houseRoomName}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							租金(1个月)
						</view>
						<view class="data">
							{{item.actualAmount}}
						</view>
					</view>

					<view class="row">
						<view class="title">
							账期
						</view>
						<view class="data">
							{{item.billPeriod}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							约定提前收租日
						</view>
						<view class="tab">
							{{item.receivableDate}}
						</view>
					</view>
				</template>

			</view>
		</view>
		
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getLeaseDetail
	} from '@/api/lease/index.js';
	import {
		HouseDetail,
		getHouseLeaseDetail
	} from "@/api/house/index.js"
	export default {
		data() {
			return {
				data: {},
				index: 0,
				show: false,
				phoneNumber: '',
				list1: [{
					name: '租约信息',
				}, {
					name: '未收费用',
				}, {
					name: '已收费用'
				}],
				list: [{
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					},
					{
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					}, {
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					}
				],
				src: '../../../static/defalut/404.png'
			}
		},
		onLoad(optien) {
			this.leaseDetail(JSON.parse(optien.houseInfo).leaseId)
		},
		methods: {
		download() {
			if(this.data.mediaList.length == 0) return this.$refs.uToast.show({
				message:'暂无文件',
				type: 'error'
			})
			var that = this
			that.data.mediaList.map((item, index) => {
				uni.downloadFile({
					url: item.mediaUrl, // 需要下载的文件的网络地址
					success: function(res) {
						if (res.statusCode === 200) { // 确保请求成功
							// res.tempFilePath 是临时文件路径
							// 可以通过这个路径打开文件或者保存到本地指定位置
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: function(saveRes) {
							 
									that.$refs.uToast.show({
										message: '文件保存成功',
										type: 'success'
									})
								},
								fail: function(err) {
									// console.error('文件保存失败', err);
									that.$refs.uToast.show({
										message: '文件保存失败',
										type: 'error'
									})
								}
							});
						} else {
							// console.error('下载文件失败，状态码：', res.statusCode);
							that.$refs.uToast.show({
								message: '下载文件失败',
								type: 'error'
							})
						}
					},
					fail: function(err) {
						that.$refs.uToast.show({
							message: '下载文件失败',
							type: 'error'
						})
					}
				});
			})
			
		},
			contact() {
				this.show = true
			},
			showDetermine() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber
				});
			},
			click(item) {
				this.index = item.index
			},
			remark() {
				uni.navigateTo({
					url: './remark',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			clickDeail() {
				uni.navigateTo({
					url: './contract',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			async leaseDetail(id) {
				const res = await getLeaseDetail(id)
				console.log(res,'111');
				if (res.data.code != 200) {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
					setTimeout(() => {
						uni.navigateBack(-1)
					}, 1000)
					return
				}
				this.data = res.data.data
				this.phoneNumber = res.data.data.tenantPhone
		 
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.tab {
		background-color: #4d89cb;
		color: #fff;
		padding: 5rpx 20rpx;
		font-size: 26rpx;
	}

	._a {
		border-radius: 30rpx;
	}

	.tab_ {
		background-color: #bad4fb;
		color: #4d89cb;
		padding: 5rpx 20rpx;
		font-size: 26rpx;
		border-radius: 30rpx;
	}

	.money {
		font-weight: bold;
	}

	.box {
		background-color: $pagebgc;
		min-height: 100vh;
		max-height: 100%;
		box-sizing: border-box;
		font-size: 32rpx;

		.card_head {
			padding: 30rpx;
			background-color: #fff;
			border-bottom: #dcdcdc solid 1rpx;

			.column {
				margin: 20rpx 0;
				width: 70%;
			}

			.icon {
				float: right;
				width: 30%;
				@include flexCenter;
				flex-direction: column;
			}

			.flexBetween {
				@include flexBetween;
			}

			.popup {
				padding: 30rpx;

				.cue {
					font-weight: bold;
					font-size: 40rpx;
					text-align: center;
					padding: 40rpx;
				}

				.button_box {
					@include flexBetween;

					.sure {
						margin-right: 10rpx;
					}
				}

				.button {
					margin-bottom: 20rpx;
				}
			}
		}

		.back {
			background-color: #fff;
			@include flexBetween;
			padding: 20rpx;
		}

		.row {
			@include flexBetween;
			padding: 20rpx 0;
		}

		.title {
			color: $noimportant;
			width: 35%;
		}
		.card {
			padding: 30rpx;
			margin-top: 20rpx;
			background-color: #fff;
		}

		.data {
			// display: flex;
			// align-items: right;
			text-align: right;
		}

		.contract {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
		}

	}
</style>